<template>
  <div class="myplan-container">
    <van-sticky>
      <van-nav-bar
        title="我的日程"
        safe-area-inset-top
        @click-left="$router.go(-1)"
      >
        <template #left>
          <van-icon class="leftIcon" name="arrow-left" />
        </template>
      </van-nav-bar>
    </van-sticky>

    <div class="main-content">
      <!-- 尚未安排计划时显示此页面 -->
      <div class="nothing" v-if="playList.length == 0">
        <!-- e点点标志性精灵 -->
        <div class="ediandian-spirit">
          <div class="image">
            <van-image
              :src="require('../../../assets/images/ediandian-spirit.png')"
              fit="cover"
            />
          </div>

          <span>小主人太懒，还没有开始日程计划~~</span>
        </div>

        <div class="tip-wrap">
          <div class="title">
            <span>点击添加日程</span>
          </div>

          <div class="icon">
            <i class="iconfont icon-shuangjiantouxia"></i>
          </div>

          <div class="button">
            <van-button
              round
              size="small"
              icon="plus"
              class="add-button"
              color="#68C4C3"
              @click="openPopup"
              >添加日程</van-button
            >
          </div>
        </div>
      </div>

      <!-- 安排计划后则显示此页面 -->
      <div class="hasplan" v-if="playList.length > 0">
        <div class="addbutton-wrap">
          <van-button color="#68C4C3" round @click="openPopup"
            >新增日程</van-button
          >
        </div>

        <van-divider />

        <div class="play-wrap">
          <div
            class="play-item"
            v-for="(play, index) in playList"
            :key="play.id"
          >
            <div class="content">
              <div class="play-time">
                <span>{{ play.startTime }} - {{ play.finishTime }}</span>
              </div>
              <div class="play-detail">
                <span>{{ play.thing }}</span>
              </div>
            </div>

            <div class="operator">
              <div class="edit" @click="onEditPlay(index)">
                <i class="iconfont icon-bianji1"></i>
              </div>

              <div class="del" @click="onDelatePlay(index)">
                <i class="iconfont icon-qingkong"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 弹出层 -->
      <van-popup v-model="show" round position="bottom" safe-area-inset-bottom>
        <div class="popup-title">
          <span>选择时间</span>
          <div class="popIcon" @click="onAddPlay">
            <i class="iconfont icon-success"></i>
          </div>
        </div>

        <div class="time-options">
          <div class="start-time">
            <van-datetime-picker
              :visible-item-count="3"
              v-model="dayplay.startTime"
              :show-toolbar="false"
              type="time"
              title="选择时间"
              :min-hour="0"
              :max-hour="23"
            />
          </div>

          <div class="guodu">
            <span>至</span>
          </div>

          <div class="finish-time">
            <van-datetime-picker
              :visible-item-count="3"
              v-model="dayplay.finishTime"
              :show-toolbar="false"
              type="time"
              title="选择时间"
              :min-hour="0"
              :max-hour="23"
            />
          </div>
        </div>

        <div class="play-edit">
          <div class="play-title">
            <span>填写日程</span>
          </div>

          <van-field
            v-model="dayplay.thing"
            rows="2"
            autosize
            type="textarea"
            maxlength="6"
            placeholder="写下这段时间的计划吧~"
            show-word-limit
          />
        </div>
      </van-popup>

      <!-- 弹出层（编辑） -->
      <van-popup
        v-model="editShow"
        round
        position="bottom"
        safe-area-inset-bottom
      >
        <div class="popup-title">
          <span>选择时间</span>
          <div class="popIcon" @click="editPlay">
            <i class="iconfont icon-success"></i>
          </div>
        </div>

        <div class="time-options">
          <div class="start-time">
            <van-datetime-picker
              :visible-item-count="3"
              v-model="editDayplay.startTime"
              :show-toolbar="false"
              type="time"
              title="选择时间"
              :min-hour="0"
              :max-hour="23"
            />
          </div>

          <div class="guodu">
            <span>至</span>
          </div>

          <div class="finish-time">
            <van-datetime-picker
              :visible-item-count="3"
              v-model="editDayplay.finishTime"
              :show-toolbar="false"
              type="time"
              title="选择时间"
              :min-hour="0"
              :max-hour="23"
            />
          </div>
        </div>

        <div class="play-edit">
          <div class="play-title">
            <span>填写日程</span>
          </div>

          <van-field
            v-model="editDayplay.thing"
            rows="2"
            autosize
            type="textarea"
            maxlength="6"
            placeholder="写下这段时间的计划吧~"
            show-word-limit
          />
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { addPlay, getAllPlay, updatePlay, deletePlay } from "@/api/play";
export default {
  name: "MyPlan",

  data() {
    return {
      editIndex: 0,
      playList: [],
      dayplay: {
        startTime: new Date().getHours() + ":" + new Date().getMinutes(),
        finishTime: new Date().getHours() + ":" + new Date().getMinutes(),
        thing: "",
        player: {
          id: "",
        },
      },

      editDayplay: {
        id: null,
        startTime: new Date().getHours() + ":" + new Date().getMinutes(),
        finishTime: new Date().getHours() + ":" + new Date().getMinutes(),
        thing: "",
        player: {
          id: "",
        },
      },
      show: false,
      editShow: false,
    };
  },

  computed: {
    ...mapState("user", ["user"]),
  },

  mounted() {
    /**
     * 初始化一些数据
     */
    this.dayplay.player.id = this.user.id;
    this.editDayplay.player.id = this.user.id;
  },

  activated() {
    let params = {
      userId: this.user.id,
    };

    getAllPlay(params).then((res) => {
      this.playList = res.data;
    });
  },

  methods: {
    onDelatePlay(index) {
      this.$dialog
        .confirm({
          title: "提示",
          message: "你确定要删除此计划吗？",
        })
        .then(() => {
          this.$toast.loading({
            duration: 0, // 持续展示 toast
            forbidClick: true,
            message: "正在删除",
          });

          //删除此计划
          let params = {
            playId: this.playList[index].id,
          };

          deletePlay(params).then((res) => {
            this.$toast.success("删除成功");
            setTimeout(() => {
              this.$toast.clear();
            }, 2000);

            //重新请求数据start
            let params = {
              userId: this.user.id,
            };

            getAllPlay(params).then((res) => {
              this.playList = res.data;
            });
            //重新请求数据end
          });
        })
        .catch(() => {
          //什么也不做，取消
        });
    },
    /**
     * 打开编辑弹出层
     */
    onEditPlay(index) {
      this.editIndex = index;
      this.editDayplay = { ...this.playList[index] };
      this.editShow = true;
    },

    /**
     * 处理编辑计划事件
     */
    editPlay() {
      /**
       * 发送请求前需要校验数据
       * 1.startTime < finishTime
       */

      if (this.editDayplay.startTime >= this.editDayplay.finishTime) {
        this.$toast("计划时间不合理，请重新选择");
        return;
      }

      if (this.editDayplay.thing == "") {
        this.$toast("计划不能为空");
        return;
      }

      updatePlay(this.editDayplay).then((res) => {
        this.playList[this.editIndex] = { ...this.editDayplay };
        this.editShow = false;
        this.$toast.success("更新成功");
      });
    },

    /**
     * 打开弹出层
     */
    openPopup() {
      if (this.playList.length == 10) {
        this.$toast("计划安排过多，请合理分配时间");

        return;
      }

      this.dayplay.startTime =
        new Date().getHours() + ":" + new Date().getMinutes();
      this.dayplay.finishTime =
        new Date().getHours() + ":" + new Date().getMinutes();
      this.dayplay.thing = "";
      this.show = true;
    },

    onAddPlay() {
      /**
       * 发送请求前需要校验数据
       * 1.startTime < finishTime
       */

      if (this.dayplay.startTime >= this.dayplay.finishTime) {
        this.$toast("计划时间不合理，请重新选择");
        return;
      }

      if (this.dayplay.thing == "") {
        this.$toast("计划不能为空");
        return;
      }

      addPlay(this.dayplay)
        .then((res) => {
          console.log("res = ", res.data);
          let params = {
            userId: this.user.id,
          };
          return getAllPlay(params);
        })
        .then((res) => {
          console.log("getAllPlay res", res);
          this.playList = res.data;
          this.show = false;

          this.$toast.success("添加成功");
        });
    },
  },
};
</script>

<style lang="less" scoped>
.leftIcon {
  color: #000 !important;
  font-size: 18px;
}

.main-content {
  width: 100%;
  min-height: 620px;
  background-image: url("../../../assets/images/myplanbg.png");
  background-size: cover;
  overflow: auto;

  .nothing {
    width: 325px;
    height: 100px;
    margin: 115px auto;

    .ediandian-spirit {
      width: 100%;
      height: auto;

      .image {
        width: 50px;
        height: 50px;
        margin: 0 auto;
        .van-image {
          width: 50px;
          height: 50px;
        }
      }

      span {
        display: inline-block;
        width: 100%;
        padding: 10px 0;
        color: #666666;
        font-size: 15px;
        text-align: center;
      }
    }

    .tip-wrap {
      width: 150px;
      height: auto;
      margin: 0 auto;

      .title {
        span {
          display: inline-block;
          width: 100%;
          color: #68c4c3;
          font-size: 15px;
          text-align: center;
          letter-spacing: 3px;
        }
      }

      .icon {
        padding: 5px 0 0 0;

        .icon-shuangjiantouxia {
          display: inline-block;
          width: 100%;
          text-align: center;
          color: #68c4c3;
        }
      }

      .button {
        width: 85px;
        height: 32px;
        margin: 0 auto;
      }
    }
  }

  .hasplan {
    .addbutton-wrap {
      width: 100%;
      height: 100px;
      position: relative;

      .van-button {
        width: 90px;
        height: 25px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    }

    .play-wrap {
      width: 100%;

      .play-item {
        box-sizing: border-box;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 330px;
        height: 60px;
        margin: 15px auto;
        padding: 0 15px;
        background-color: #fff;
        border-radius: 10px;

        .content {
          width: 125px;
          height: 100%;

          .play-time {
            width: 100%;
            height: 30px;

            span {
              line-height: 30px;
              font-size: 15px;
              color: rgba(0, 0, 0, 0.5);
            }
          }

          .play-detail {
            width: 100%;
            height: 30px;

            span {
              line-height: 30px;
              font-size: 18px;
            }
          }
        }

        .operator {
          width: 120px;
          height: 40px;
          margin: 10px 0;
          display: flex;
          flex-direction: row;
          justify-content: space-around;

          .edit {
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #68c4c3;
            .iconfont {
              position: absolute;
              display: block;
              width: 23px;
              height: 23px;
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
              margin: auto;
              color: #fff;
            }
          }

          .del {
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #f7931e;

            .iconfont {
              position: absolute;
              display: block;
              width: 23px;
              height: 23px;
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
              margin: auto;
              color: #fff;
            }
          }
        }
      }

      .play-item::before {
        position: absolute;
        content: "";
        top: 10px;
        left: 0;
        width: 5px;
        height: 40px;
        background-color: #68c4c3;
      }
    }
  }
}

.van-popup {
  background-color: #f2f2f2;
}

.popup-title {
  position: relative;
  width: 100%;
  height: 35px;
  span {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 15px;
  }

  .popIcon {
    position: absolute;
    right: 15px;
    top: 0px;

    .icon-success {
      font-size: 15px;
      line-height: 35px;
      color: #f7931e;
    }
  }
}

.time-options {
  width: 100%;
  height: 140px;
  display: flex;
  background-color: #fff;
  flex-direction: row;
  justify-content: space-between;

  .guodu {
    width: 30px;
    height: 100%;
    span {
      font-size: 18px;
      line-height: 140px;
    }
  }

  .start-time,
  .finish-time {
    width: 150px;
    height: 100px;

    .van-datetime-picker {
      width: 100%;
      height: 100%;
    }
  }
}

.play-edit {
  width: 100%;
  height: 130px;
  padding: 0 0 30px 0;

  .play-title {
    width: 100%;
    padding: 5px 0;
    span {
      display: inline-block;
      width: 100%;
      text-align: center;
      font-size: 15px;
    }
  }
}
</style>